<template>
	<view>
		<u-navbar :is-back="true" :border-bottom="false" title="我的点赞" title-color="white"
			:background="{backgroundColor: '#00a8ff'}">
		</u-navbar>
		<view class="u-p-12">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="u-p-12" v-for="(item, index) in list1" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
						</u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							<u-avatar src="" size="36"></u-avatar> <text
								style="position: relative;top: -10rpx;left: 10rpx;"> {{item.shop}}</text>

							<text class="u-close" style="position: relative;top: 5rpx;">1024</text>
							<u-icon name="heart" color="#9b9b9b" size="34" class="u-close">
							</u-icon>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="u-p-12" v-for="(item, index) in list2" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
						</u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							<u-avatar src="" size="36"></u-avatar> <text
								style="position: relative;top: -10rpx;left: 10rpx;"> {{item.shop}}</text>

							<text class="u-close" style="position: relative;top: 5rpx;">1024</text>
							<u-icon name="heart" color="#9b9b9b" size="34" class="u-close">
							</u-icon>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowList: [],
				list1: [{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '已售50',
						image: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974063438,76061761&fm=26&gp=0.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '已售50',
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F984%2FceU7xYD3umwA.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623210652&t=f684776679156a60938c294e59efd9c3',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '已售50',
						image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg',
					}
				],
				list2: [{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '已售50',
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F984%2FceU7xYD3umwA.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623210652&t=f684776679156a60938c294e59efd9c3',
					},
					{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '已售50',
						image: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974063438,76061761&fm=26&gp=0.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '已售50',
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F20130625150506_fiJ2r.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623210896&t=e8855416d750ae22683ed2a2af25371b',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '已售50',
						image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg',
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.u-close {
		float: right;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
